<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
</head>
<body>
	<%-- <a class="btn btn-primary" href="${pageContext.request.contextPath}/student/getStudentInsertPage.action">添加</a> --%>
	<a class="btn btn-primary" href="javascript:void(0)" onclick="insert()" >添加</a>
	
	<table id="tableId" lay-filter="tableFilter"></table>
	
	<script src="${pageContext.request.contextPath}/js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
	<script src="${pageContext.request.contextPath}/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="${pageContext.request.contextPath}/js/mylayer.js" type="text/javascript" charset="utf-8"></script>
	<script src="${pageContext.request.contextPath}/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	
	<!-- 这个d代表当前正在遍历的这一行的对象，所以这个d在这里就代表student对象 -->
	<!-- {{d.banji.name}} -->
	<script type="text/html" id="banjiTpl">
		{{#  	if(d.banji != null){ 	 	 }}
					{{d.banji.name}}
  		{{#  	} else { 					 }}
    				未分配班级
  		{{#  	} 							 }}
	</script>
	
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script type="text/javascript">
		// layui包含很多模块，不会都去加载，而是使用哪个模块就去加载哪个模块
		layui.use('table', function(){
		    var table = layui.table;
		  
		    //使用table去渲染表格
			table.render({
			    elem: '#tableId' // 执行要渲染的table的id
			    ,height: 470
			    ,url: '${pageContext.request.contextPath}/student/findByPage.action' //数据接口
			    ,page: true //开启分页
			    ,cols: [[ //表头
			      {field: 'id', title: 'ID', sort: true}
			      ,{field: 'name', title: '用户名'}
			      ,{field: 'age', title: '性别', sort: true}
			      ,{field: 'gender', title: '城市'}
			      ,{field: 'birthday', title: '生日', templet:"<div>{{!d.birthday?'未知':layui.util.toDateString(d.birthday, 'yyyy-MM-dd')}}</div>"}
			      ,{title: '班级名称', templet: '#banjiTpl'}
			      ,{title:'操作', toolbar: '#barDemo'}
			    ]]
				,id: 'tableReload'
			});
		    
			//监听右侧的toolbar的点击事件
			table.on('tool(tableFilter)', function(obj){
				// {id: 24, name: "44", age: 44, gender: "4", banji: {…}}
			    var data = obj.data;
			    console.log(obj)
			    if(obj.event === 'del'){
			        layer.confirm('真的删除行么', function(index){
			        	$.post(
			        		"${pageContext.request.contextPath}/student/deleteById.action",
			        		{"id" : data.id},
			        		function(result) {
			        			if(result.success) {
			        				mylayer.successMsg(result.msg);
			        				//重新加载表格数据
			        			    table.reload('tableReload');
			        			} else {
			        				mylayer.errorMsg(result.msg);
			        			}
			        			
			        			//layer.close(index);
			        		},
			        		"json"
			        	);
			        });
			    } else if(obj.event === 'edit'){
			        layer.msg("编辑");
			        
			    }
			});
		  
		  
		});
		
		function insert() {
			layer.open({
				type : 2,
				tile : "添加",
				area : ["700px", "450px"],
				content : "${pageContext.request.contextPath}/student/getStudentInsertPage.action"
			});
		}
	</script>
</body>
</html>